<template>
  <div class="statistic-manage">
    <div class="sm-top">
      <div>
        <p class="number-font">{{ result.signedNum }}</p>
        <p>已签约用户数</p>
      </div>
      <div>
        <p class="number-font">{{ result.platformReviewNum }}</p>
        <p>平台审核数</p>
      </div>
      <div>
        <p class="number-font">{{ formattedAmount(parseFloat(result.cumulativeLoanBalance).toFixed(2)) }}</p>
        <p>累计发放贷款余额</p>
      </div>
      <div>
        <p class="number-font">{{ formattedAmount(parseFloat(result.cumulativeInLoanBalance).toFixed(2)) }}</p>
        <p>累计在贷余额</p>
      </div>
      <div>
        <p class="number-font">{{ result.ztEventTracking }}</p>
        <p>中天数据埋点<br />（总用户数）</p>
      </div>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="已签约用户数" name="first">
        <user-number></user-number>
      </el-tab-pane>
      <el-tab-pane label="平台审核数" name="second">
        <examination-number></examination-number>
      </el-tab-pane>
      <el-tab-pane label="累计发放贷款余额" name="third">
        <loan-balance></loan-balance>
      </el-tab-pane>
      <el-tab-pane label="年日均贷款余额" name="fourth">
        <loan-day></loan-day>
      </el-tab-pane>
      <el-tab-pane label="中天数据埋点" name="five">
        <zhong-tian></zhong-tian>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import examinationNumber from '../../components/examinationNumber.vue'
import loanBalance from '../../components/loanBalance.vue'
import loanDay from '../../components/loanDay.vue'
import userNumber from '../../components/userNumber.vue'
import zhongTian from '../../components/zhongTian.vue'
import http from '@/utils/request'
export default {
  name: 'index',
  data() {
    return {
      activeName: 'first',
      result: {
        cumulativeAveragedayLoanBalance: '',
        cumulativeInLoanBalance: '',
        platformReviewNum: '',
        signedNum: '',
        ztEventTracking: '',
      },
    }
  },
  components: {
    examinationNumber,
    loanBalance,
    loanDay,
    userNumber,
    zhongTian,
  },
  mounted() {
    this.initPage()
  },
  methods: {
    formattedAmount(amount) {
      if (amount === null || isNaN(amount)) {
        return '--'
      }
      const parts = amount.toString().split('.')
      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      return parts.join('.')
    },
    async initPage() {
      const res = await http.get('/operations/getDataStatistics')
      this.result = res
    },
  },
}
</script>

<style lang="scss" scoped>
.statistic-manage {
  .sm-top {
    height: 100px;
    background: #f1f1f1;
    div {
      width: 20%;
      float: left;
      height: 100px;
      cursor: pointer;
      text-align: center;
      .number-font {
        margin-top: 34px;
        color: #02a7f0;
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
}
</style>
